<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<style>
	.GridMain1 .GridMain2 .GMCellHeader {
 		background-color: #f22000;
		background: -moz-linear-gradient(top,  #f22000 0%, #f79102 21%, #fff760 35%, #0bfc07 52%, #05b6fc 71%, #002df9 86%, #7f00ff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f22000), color-stop(21%,#f79102), color-stop(35%,#fff760), color-stop(52%,#0bfc07), color-stop(71%,#05b6fc), color-stop(86%,#002df9), color-stop(100%,#7f00ff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f22000', endColorstr='#7f00ff',GradientType=0 ); /* IE6-8 */
	}
	
	.GridMain1 .GridMain2 .GMMainTable {
		border-bottom-left-radius:1em;
		border-bottom-right-radius:1em;
	}
	
</style>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",		Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",		Type:"Radio"}
		       		];
		
		IBS_InitSheet(mySheet, sheet_init);
	
		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "init":		//초기화
				mySheet.Reset();
				createSheet();
				break;
		}
	}
	
</script>
<title>독특한 디자인 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">독특한 디자인 예제</div>
	<div id="desc">
		라운드나 헤더 입체형과 같은 스타일, 다른 사이트에서 특이한 스타일을 보고 구현해보기
	</div>
	<div align="right">
		<input type="button" value="초기화" onclick="doAction('init')">
		<input type="button" value="조회" onclick="doAction('search')">
	</div>
	<div id="functionArea">
		<div style="font-size:10pt">
		사용되는 ibsheet.css 파일은 Main에서 가져왔기 때문에 클래스 명이 GM 으로 시작된다.<br>
		다른 테마 폴더를 사용할 경우, GM을 제외한 클래명으로 검색해서 변경해야 한다.<br>
		<br>
		※ 라운드<br>
		예) 테이블의 좌우 아래 모서리를 둥글게 할 경우, MainTable을 검색해서 radius 설정을 추가해준다.<br>
		<br>
		.GMMainTable {<br>
		&nbsp;&nbsp;&nbsp;&nbsp;border-bottom-left-radius:1em;<br>
		&nbsp;&nbsp;&nbsp;&nbsp;border-bottom-right-radius:1em;<br>
		}<br>
		<br>
		※ 헤더 색 변경<br>
		예)헤더 색을 변경하는 경우 CellHeader를 찾아서 변경하면 된다. 아래 예제는 무지개색으로 그라데이션을 적용한다.<br>
		<br>
		.GMCellHeader {<br>
 		&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f22000;<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: -moz-linear-gradient(top,  #f22000 0%, #f79102 21%, #fff760 35%, #0bfc07 52%, #05b6fc 71%, #002df9 86%, #7f00ff 100%); /* FF3.6+ */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f22000), color-stop(21%,#f79102), color-stop(35%,#fff760), color-stop(52%,#0bfc07), color-stop(71%,#05b6fc), color-stop(86%,#002df9), color-stop(100%,#7f00ff)); /* Chrome,Safari4+ */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: -webkit-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* Chrome10+,Safari5.1+ */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: -o-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* Opera 11.10+ */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: -ms-linear-gradient(top,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* IE10+ */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;background: linear-gradient(to bottom,  #f22000 0%,#f79102 21%,#fff760 35%,#0bfc07 52%,#05b6fc 71%,#002df9 86%,#7f00ff 100%); /* W3C */<br>
		&nbsp;&nbsp;&nbsp;&nbsp;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f22000', endColorstr='#7f00ff',GradientType=0 ); /* IE6-8 */<br>
		}<br>
		<br>
		<b>※ 단, 그라데이션이 적용된 시트의 경우, 엑셀다운로드시 문제가 발생할 수 있다.</b>
		</div>
	</div>
	<div id="viewArea">
	</div>
</div>
</body>
</html>